<template>
    <div class="login">
       <div class="login-header">
           <img class="headerimg" src="http://www.tp5.com/images/banner-2a.png" alt="">
       </div>
       <van-form validate-first @submit="registers" v-show="register">
            <!-- 通过 pattern 进行正则校验 -->
            <van-field
                v-model="username"
                name="username"
                placeholder="用户名"
                :rules="[{  required:true, message: '用户名不能为空' }]"
            />
            <van-field
                v-model="password"
                name="pattern"
                placeholder="密码"
                :rules="[{ required:true, message: '密码不能为空' }]"
            />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">
                    注册
                </van-button>
                <span class="van-log" v-on:click="ToLogin">已有账号？马上登录</span>
            </div>
        </van-form>
        <van-form validate-first @submit="onSubmit" v-show="logins">
            <!-- 通过 pattern 进行正则校验 -->
            <van-field
                v-model="name"
                name="name"
                placeholder="用户名"
                :rules="[{  required:true, message: '用户名不能为空' }]"
            />
            <van-field
                v-model="logpassword"
                name="logpassword"
                placeholder="密码"
                :rules="[{ required:true, message: '密码不能为空' }]"
            />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">
                    登录
                </van-button>
                <span class="van-log" v-on:click="ToRegister">没有账号？马上注册</span>
            </div>
        </van-form>
    </div>
</template>

<script>
export default {
    name:'login',
    data(){
        return {
            username: '',
            name:'',
            password:'',
            logpassword:'',
            logins:true,
            register:false,
        }
    },
    methods:{
        registers(values) {
            this.axios.post('api/v1/user',{
               username:this.username,
               password:this.password
            }).then((res)=>{
                 this.$createDialog({
                    type: 'alert',
                    title: res.data.msg,
                    icon: 'cubeic-alert'
                }).show()
               this.register = false;
               this.logins = true;
               this.username = '',
               this.password = ''
            }).catch((res)=>{
                return res;
            })
        },
        onSubmit(){
             this.axios.post('api/v1/login',{
               name:this.name,
               logpassword:this.logpassword
            }).then((res)=>{
                console.log(res);
                if(res.data.status == 200){
                    this.$router.push({path:'/my'})
                    this.$store.dispatch('savaUserName',res.data.name);
                    this.$store.dispatch('userId',res.data.id);
                }else{
                    this.$createDialog({
                        type: 'alert',
                        title: res.data.msg,
                        icon: 'cubeic-alert'
                    }).show()
                }
            }).catch((res)=>{
                return res;
            })
        },
        ToLogin(){
            this.logins = !this.logins;
            this.register = !this.register;
        },
        ToRegister(){
            this.logins = !this.logins;
            this.register = !this.register;
        }
    }
}
</script>

<style lang="scss">
    .login{
        .login-header{
            height: 200px;
            margin-bottom: 10px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .van-log{
            font-size: 14px;
        }
    }
</style>